<template>
	<view class="content-box" :class="{searchActive:isFocusInput=='1'}">
		<!-- 搜索框 -->
		<view class="search-container">
			<view class="search-box">
				<view class="border-box">
					<image class="search-icon" src="/static/icon/search-icon2.svg" mode="aspectFit"></image>
					<input class="search-input" type="text" :placeholder="t('market.ss')" v-model="searchText" @focus="focusInput"
						@input="inputEvent" />
				</view>
			</view>
			<view class="search-txt" v-if="isFocusInput=='1'" @click="cancelSearch">{{t('common.cancel')}}</view>
		</view>
		<view v-if="isFocusInput != '2'">
			<!-- 筛选按钮 -->
			<view class="filter-container">
				<view class="filter-btn" :class="{ active: activeFilter === 'hangqing' }" @click="setActiveFilter('hangqing')">
					{{ t('market.hq') }}
				</view>
				<view class="filter-btn" :class="{ active: activeFilter === 'zixuan' }" @click="setActiveFilter('zixuan')">
					{{ t('market.zx') }}
				</view>
			</view>

			<!-- 表头 -->
			<view class="table-header">
				<view class="header-item name-header" @click="sortBy('name')">
					<text>{{ t('market.mc') }}</text>
					<view class="sort-arrows">
						<image class="arrow-up" :class="{ active: sortConfig.field === 'name' && sortConfig.order === 'asc' }"
							src="/static/icon/arrow.svg" mode="aspectFit"></image>
						<image class="arrow-down" :class="{ active: sortConfig.field === 'name' && sortConfig.order === 'desc' }"
							src="/static/icon/arrow.svg" mode="aspectFit"></image>
					</view>
				</view>
				<view class="header-item price-header" @click="sortBy('price')">
					<text>{{ t('market.zxj') }}</text>
					<view class="sort-arrows">
						<image class="arrow-up" :class="{ active: sortConfig.field === 'price' && sortConfig.order === 'asc' }"
							src="/static/icon/arrow.svg" mode="aspectFit"></image>
						<image class="arrow-down" :class="{ active: sortConfig.field === 'price' && sortConfig.order === 'desc' }"
							src="/static/icon/arrow.svg" mode="aspectFit"></image>
					</view>
				</view>
				<view class="header-item change-header" @click="sortBy('change')">
					<text>{{ t('market.zdf') }}</text>
					<view class="sort-arrows">
						<image class="arrow-up" :class="{ active: sortConfig.field === 'change' && sortConfig.order === 'asc' }"
							src="/static/icon/arrow.svg" mode="aspectFit"></image>
						<image class="arrow-down" :class="{ active: sortConfig.field === 'change' && sortConfig.order === 'desc' }"
							src="/static/icon/arrow.svg" mode="aspectFit"></image>
					</view>
				</view>
			</view>

			<!-- 行情数据列表 -->
			<scroll-view v-if="activeFilter=='hangqing'" class="data-list" scroll-y="true" @scrolltolower="fetchMarketData(true)" lower-threshold="100">
				<view class="data-item" v-for="(item, index) in filteredData" :key="index" @click="goProdDetail(item)">
					<view class="item-left">
						<image class="coin-icon" :src="item.logo || `/static/icon/${item.name}.png`" mode="aspectFit"></image>
						<view class="coin-info">
							<text class="coin-name">{{ item.name }}</text>
							<text class="coin-pair">{{ item.pair }}</text>
						</view>
					</view>
					<view class="item-center">
						<text class="coin-price">{{ item.price }}</text>
					</view>
					<view class="item-right">
						<view class="change-btn" :class="{ positive: item.change > 0, negative: item.change < 0 }">
							<text class="change-text">{{ item.change > 0 ? '+' : '' }}{{ item.change }}%</text>
						</view>
					</view>
				</view>
				<!-- 加载提示 -->
				<view v-if="isLoadingMarket" class="loading-tip">
					<text>加载中...</text>
				</view>
				<view v-if="marketPageNo * marketPageSize >= marketTotal && marketTotal > 0" class="loading-tip">
					<text>没有更多数据</text>
				</view>
			</scroll-view>
			<!-- 自选数据列表 -->
			<view class="data-list" v-else>
				<!-- 已添加自选产品 -->
				<view v-if="filteredSelfSelectedData && filteredSelfSelectedData.length > 0">
					<view class="self-box">
						<view class="self-item" v-for="(item,index) in filteredSelfSelectedData" :key="item.id || index" @click="goProdDetail(item)">
							<view class="self-left">
								<view class="name-box">
									<span class="currency-name">{{item.name}}</span>
									<span class="name-us">/USDT</span>
								</view>
								<view class="price-change-box">
									<span class="price">{{item.price}}</span>
									<span class="revenue-txt" :class="{ positive: item.change > 0, negative: item.change < 0 }">{{ item.change > 0 ? '+' : '' }}{{ item.change }}%</span>
								</view>
							</view>
							<view class="self-right">
								<image class="select-icon" src="/static/image/market/select.svg"></image>
							</view>
						</view>
					</view>
				</view>
				<!-- 未添加自选产品 -->
				<view v-else class="noproduct-box">
					<view class="noproduct">
						<view class="noproduct-img">
							<image src="/static/image/market/noproduct.svg" mode=""></image>
						</view>
						<view class="noproduct-title">
							{{t('market.nhmytjcp')}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 点击搜索框未输入 -->
		<view v-if="isFocusInput=='1'" class="search-modal">
			<view class="hot-title">{{t('search.rs')}}</view>
			<view class="ranking-list">
				<view class="ranking-item" v-for="(item,index) in hotSearchList" :key="index">
					<view class="left">
						<view class="ranking-num" :class="{rankActive:index<3}">{{item.num}}</view>
						<view class="ranking-name">
							<view class="name">
								{{item.name}}
							</view>
							<view class="heat" v-if="index<3">
								<image v-for="val in setHeatNum(index)" :key="val" src="/static/image/market/hot.svg" mode=""></image>
							</view>
						</view>
					</view>
					<view class="middle">
						<view class="price">
							{{item.price}}
						</view>
						<view class="change-price" :class="{ positive: item.change > 0, negative: item.change < 0 }">
							{{ item.change > 0 ? '+' : '' }}{{ item.change }}%
						</view>
					</view>
					<view class="right">
						<image @click="changeCollect(item)" v-if="item.isCollect" src="/static/image/market/star-active.svg"
							mode="">
						</image>
						<image @click="changeCollect(item)" v-else src="/static/image/market/star.svg" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 点击搜索框输入 -->
		<view class="search-input-modal" v-if="isFocusInput=='2'">
			<!-- 有结果 -->
			<view v-if="isSearchResult=='1'" class="search-result">
				<view class="result-item" v-for="(item,index) in searchResultList" :key="index">
					<view class="left">{{item.name}}</view>
					<view class="middle">
						<view class="price">
							{{item.price}}
						</view>
						<view class="change-price" :class="{ positive: item.change > 0, negative: item.change < 0 }">
							{{ item.change > 0 ? '+' : '' }}{{ item.change }}%
						</view>
					</view>
					<view class="right">
						<image @click="changeCollect(item)" v-if="item.isCollect" src="/static/image/market/star-active.svg"
							mode="">
						</image>
						<image @click="changeCollect(item)" v-else src="/static/image/market/star.svg" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 无结果 -->
			<view v-else class="nosearch-box">
				<view class="noproduct-img">
					<image src="/static/image/market/nosearch.svg" mode=""></image>
				</view>
				<view class="noproduct-title">
					没有搜索结果~
				</view>
			</view>
		</view>
		<!-- 底部tabbar -->
		<tabbar :currentTab="1"></tabbar>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		reactive,
		onMounted,
		onUnmounted
	} from 'vue';
	import {
		useI18n
	} from 'vue-i18n';
	import { goodsApi } from '@/utils/api.js'; // 导入商品相关API
	import websocketService from '@/utils/websocket.js';
	
	const {
		t,
		locale
	} = useI18n();

	// 响应式数据
	const last = ref(true)
	const searchText = ref('');
	const activeFilter = ref('hangqing');
	const isCollect = ref(false); //是否收藏
	const isFocusInput = ref('0'); //搜索输入框聚焦事件
	const isSearchResult = ref('1'); //是否有搜索结果
	const sortConfig = ref({
		field: '',
		order: 'asc'
	});
	
	// 分页相关
	const marketPageNo = ref(1);
	const marketPageSize = ref(10);
	const marketTotal = ref(0);
	const isLoadingMarket = ref(false);
	
	// 行情数据
	const marketData = ref([]);
	// 自选数据
	const selfSelectedData = ref([]);
	
	// WebSocket连接相关
	let websocket = null;
	// 需3行空白
	// 添加自选列表
	const addSelfSelectList = ref([])
	// 搜索列表数据
	const searchResultList = ref([])
	const isSearchLoading = ref(false)
	// 设置热搜火花数量
	const setHeatNum = (index) => {
		if (index == '0') {
			return 3
		} else if (index == '1') {
			return 2
		} else {
			return 1
		}
	}
	// 热搜列表数据
	const hotSearchList = ref([])
	const isHotSearchLoading = ref(false)

	// 防抖搜索函数
	const debounce = (fn, delay) => {
		let timer = null
		return function(...args) {
			clearTimeout(timer)
			timer = setTimeout(() => fn.apply(this, args), delay)
		}
	}

	// 搜索防抖处理
	const debouncedSearch = debounce((keyword) => {
		if (keyword) {
			performSearch(keyword)
		} else {
			searchResultList.value = []
			isSearchResult.value = '0'
		}
	}, 300)
	
	// 格式化产品代码
	const formatProductCode = (code) => {
		if (!code) return { name: 'N/A', pair: 'N/A' };
		const upperCode = String(code).toUpperCase();
		const baseCurrencies = ['USDT', 'USD', 'BTC', 'ETH', 'BNB'];
		for (const base of baseCurrencies) {
			if (upperCode.endsWith(base)) {
				const name = upperCode.replace(base, '');
				return { name, pair: `${name}/${base}` };
			}
		}
		if (upperCode.length > 4) {
			const name = upperCode.slice(0, -4);
			const base = upperCode.slice(-4);
			return { name, pair: `${name}/${base}` };
		}
		return { name: upperCode, pair: upperCode };
	};

	// 处理行情接口数据 - 专针对整个产品列表
	const processMarketData = (list) => {
		return list.map(item => {
			const stockInfo = item.stockInfo || {};
			const market = stockInfo.market || {};
			const { name, pair } = formatProductCode(item.productCode);
			
			return {
				id: item.id,
				stockId: item.stockId,
				name: name,
				pair: pair,
				price: market.lastPrice || '0.00',
				change: parseFloat(String(market.changePercent || '0').replace('%', '')),
				logo: item.logo
			};
		});
	};

	// 处理自选接口数据 - 专针对整个产品列表
	const processFavoritesData = (list) => {
		return list.map(item => {
			const stockInfo = item.stockInfo || {};
			const market = stockInfo.market || {};
			const { name, pair } = formatProductCode(item.productCode);
			
			return {
				id: item.id,
				stockId: item.stockId,
				name: name,
				pair: pair,
				price: market.lastPrice || '0.00',
				change: parseFloat(String(market.changePercent || '0').replace('%', '')),
				logo: item.logo
			};
		});
	};

	// 获取热搜数据
	const fetchHotSearchData = async () => {
		try {
			isHotSearchLoading.value = true
			// 优先从行情数据中获取热门股票
			if (marketData.value.length > 0) {
				hotSearchList.value = marketData.value.slice(0, 6).map((item, index) => ({
					...item,
					num: String(index + 1)
				}))
			}
		} catch (error) {
			// 热搜数据加载失败
		} finally {
			isHotSearchLoading.value = false
		}
	}

	// 执行搜索
	const performSearch = async (keyword) => {
		try {
			isSearchLoading.value = true
			isSearchResult.value = '1'

			// 从本地行情数据中筛选匹配的商品
			const filteredData = marketData.value.filter(item =>
				item.name.toLowerCase().includes(keyword.toLowerCase()) ||
				item.pair.toLowerCase().includes(keyword.toLowerCase())
			)

			searchResultList.value = filteredData.map((item, index) => ({
				...item,
				num: String(index + 1)
			}))

			if (filteredData.length === 0) {
				isSearchResult.value = '0'
			}
		} catch (error) {
			// 搜索失败
			isSearchResult.value = '0'
		} finally {
			isSearchLoading.value = false
		}
	}

	// 获取行情数据
	const fetchMarketData = async (isLoadMore = false) => {
		try {
			if (isLoadMore) {
				// 上滑加载次页
				if (isLoadingMarket.value) return; // 正在加载中，不继续载入
				if (marketPageNo.value * marketPageSize.value >= marketTotal.value) {
					return;
				}
				isLoadingMarket.value = true;
				marketPageNo.value += 1;
			} else {
				// 次切换或初始化，重置页码
				marketPageNo.value = 1;
			}
			
			const params = { pageNo: marketPageNo.value, pageSize: marketPageSize.value };
			const res = await goodsApi.getStockPage(params);
			
			if (res?.data?.list) {
				const newData = processMarketData(res.data.list);
				
				// 记录总数
				marketTotal.value = res.data.total || 0;
				
				if (isLoadMore) {
					// 上滑加载，追加数据
					marketData.value = [...marketData.value, ...newData];
				} else {
					// 初始化或次切换，覆盖数据
					marketData.value = newData;
				}
			}
		} catch (error) {
			// 获取行情数据失败
		} finally {
			isLoadingMarket.value = false;
		}
	};
	
	// 获取自选数据
	const fetchSelfSelectedData = async () => {
		try {
			const res = await goodsApi.getStockFavoritesPage({ pageNo: 1, pageSize: 10 });
			
			if (res?.data?.list) {
				selfSelectedData.value = processFavoritesData(res.data.list);
			}
		} catch (error) {
			// 获取自选数据失败
		}
	};
	
	// 初始化WebSocket连接
	const initWebSocket = () => {
		try {
			// 移除之前的消息监听器（如果存在）
			if (window.websocketMessageHandler) {
				websocketService.removeMessageListener(window.websocketMessageHandler);
			}
			
			// 创建新的消息监听器
			const messageHandler = (message) => {
				try {
					// 只处理类型为stock-kline-min1的消息
					if (message.type === 'stock-kline-min1') {
						// 解析content字段（根据示例，content是字符串，需要解析两次）
						let content;
						try {
							// 第一次解析：将content字符串解析为JSON
							const contentStr = JSON.parse(message.content);
							
							// 第二次解析：将解析后的字符串再次解析为JSON对象
							content = JSON.parse(contentStr);
						} catch (parseError) {
							return;
						}
						
						// 获取市场数据
						const marketData = content.market;
						
						if (marketData && content.id) {
							// 更新股票数据，使用content.id与stockId匹配
							updateStockData({
								id: content.id,  // 使用content.id与stockId对应
								lastPrice: marketData.lastPrice,
								changePercent: marketData.changePercent
							});
						}
					}
				} catch (error) {
					// 处理WebSocket消息异常
				}
			};
			
			// 添加消息监听器
			websocketService.addMessageListener(messageHandler);
			
			// 保存监听器引用到全局变量，以便后续移除
			window.websocketMessageHandler = messageHandler;
			
		} catch (error) {
			// 初始化WebSocket异常
		}
	};
	
	// 更新股票数据
	const updateStockData = (data) => {
		// 更新行情数据 - 使用stockId匹配
		const marketIndex = marketData.value.findIndex(item => item.stockId === data.id);
		if (marketIndex !== -1) {
			marketData.value[marketIndex].price = data.lastPrice;
			// 处理changePercent，确保正确解析
			const changePercent = parseFloat(String(data.changePercent || '0').replace('%', ''));
			marketData.value[marketIndex].change = changePercent;
		}
		
		// 更新自选数据 - 使用stockId匹配
		const selfIndex = selfSelectedData.value.findIndex(item => item.stockId === data.id);
		if (selfIndex !== -1) {
			selfSelectedData.value[selfIndex].price = data.lastPrice;
			// 处理changePercent，确保正确解析
			const changePercent = parseFloat(String(data.changePercent || '0').replace('%', ''));
			selfSelectedData.value[selfIndex].change = changePercent;
		}
	};
	
	// 通用排序和筛选逻辑
	const applyFilterAndSort = (data) => {
		// 根据搜索文本筛选
		if (searchText.value) {
			data = data.filter(item =>
				item.name.toLowerCase().includes(searchText.value.toLowerCase()) ||
				item.pair.toLowerCase().includes(searchText.value.toLowerCase())
			);
		}

		// 排序
		if (sortConfig.value.field) {
			data = [...data].sort((a, b) => {
				let aValue, bValue;

				switch (sortConfig.value.field) {
					case 'name':
						aValue = a.name;
						bValue = b.name;
						break;
					case 'price':
						aValue = parseFloat(a.price);
						bValue = parseFloat(b.price);
						break;
					case 'change':
						aValue = a.change;
						bValue = b.change;
						break;
					default:
						return 0;
				}

				if (sortConfig.value.order === 'asc') {
					return aValue > bValue ? 1 : -1;
				} else {
					return aValue < bValue ? 1 : -1;
				}
			});
		}

		return data;
	};

	// 行情数据 - 筛选和排序
	const filteredMarketData = computed(() => {
		return applyFilterAndSort([...marketData.value]);
	});

	// 自选数据 - 筛选和排序
	const filteredSelfSelectedData = computed(() => {
		return applyFilterAndSort([...selfSelectedData.value]);
	});

	// 通用筛选数据
	const filteredData = computed(() => {
		return activeFilter.value === 'hangqing' ? filteredMarketData.value : filteredSelfSelectedData.value;
	});

	// 设置筛选类型
	const setActiveFilter = (filter) => {
		activeFilter.value = filter;
		// 切换标签時重新加载数据
		if (filter === 'hangqing') {
			marketPageNo.value = 1;
			fetchMarketData(false);
		} else {
			fetchSelfSelectedData();
		}
	};

	// 排序功能
	const sortBy = (field) => {
		if (sortConfig.value.field === field) {
			// 切换排序顺序
			sortConfig.value.order = sortConfig.value.order === 'asc' ? 'desc' : 'asc';
		} else {
			// 设置新的排序字段
			sortConfig.value.field = field;
			sortConfig.value.order = 'asc';
		}
	};
	
	// 点击搜索框
	const focusInput = () => {
		uni.navigateTo({
			url:"/pages/market/search"
		})
	}
	// 搜索框输入事件（防抖处理）
	const inputEvent = (e) => {
		const keyword = e.detail.value.trim()
		isFocusInput.value = keyword ? '2' : '0'
		debouncedSearch(keyword)
	}
	// 取消搜索
	const cancelSearch = () => {
		isFocusInput.value = '0'
		searchText.value = ''
	}
	// 修改收藏星星样式
	const changeCollect = (item) => {
		item.isCollect = !item.isCollect
	}
	// 勾选自选项
	const chooseSelected = (item) => {
		item.isChoose = !item.isChoose
	}
	
	// 跳转产品详情
	const goProdDetail = (item) => {
		// 根据当前标签确定要传递的ID
		const detailId = activeFilter.value === 'hangqing' ? item.id : item.stockId;
		// 获取图标路径
		const iconPath = item.logo || `/static/icon/${item.name}.png`;
		uni.navigateTo({
			url: `/pages/market/details?id=${detailId}&iconPath=${encodeURIComponent(iconPath)}`
		})
	}
	
	// 组件挂载时初始化数据
	onMounted(() => {
		// 初始化数据 - 只加载当前激活标签的数据
		if (activeFilter.value === 'hangqing') {
			marketPageNo.value = 1;
			fetchMarketData(false);
			// 获取热搜数据
			fetchHotSearchData();
		} else {
			fetchSelfSelectedData();
		}

		// 检查WebSocket连接状态
		setTimeout(() => {
			try {
				const connectionStatus = websocketService.getConnectionStatus();

				if (connectionStatus.isConnected) {
					initWebSocket();
				} else {
					// 尝试重新连接
					const token = uni.getStorageSync('access_token');
					if (token) {
						websocketService.connect(token)
							.then(() => {
								initWebSocket();
							});
					}
				}
			} catch (error) {
				// 检查WebSocket连接状态异常
			}
		}, 1000);
	});
	
	// 组件卸载时关闭WebSocket连接
	onUnmounted(() => {
		try {
			// 移除WebSocket消息监听器
			if (window.websocketMessageHandler) {
				websocketService.removeMessageListener(window.websocketMessageHandler);
			}
		} catch (error) {
			// 移除WebSocket监听器异常
		}
	});
</script>

<style scoped lang="scss">
	.content-box {
		min-height: 100vh;
		background-color: #F5F6FA;
		padding-bottom: 100rpx;
		padding: 41.86rpx 34.89rpx;
		box-sizing: border-box;
	}

	// 搜索框样式
	.search-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 41.86rpx;

		.search-box {
			width: 100%;
			display: flex;
			align-items: center;
			padding: 1px;
			box-sizing: border-box;
			border-radius: 1742.54rpx;
			background: linear-gradient(90deg, rgba(14, 194, 157, 1) 0%, rgba(88, 218, 221, 1) 35.42%, rgba(25, 162, 203, 1) 68.75%, rgba(2, 124, 217, 1) 100%);

			.border-box {
				width: 100%;
				display: flex;
				align-items: center;
				border-radius: 1742.54rpx;
				background-color: #Fff;
				padding: 19.19rpx 86.6rpx;
			}

			// margin-right: 33.14rpx;
		}

		.search-txt {
			display: flex;
			font-size: 31.4rpx;
			// font-weight: 400;
			line-height: 45.46rpx;
			color: rgba(0, 0, 0, 1);
			flex-shrink: 0;
			margin-left: 20.93rpx;
		}
	}



	.search-icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 21.44rpx;
		opacity: 0.6;
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
		color: #333333;
		border: none;
		outline: none;
		background: transparent;

		&::placeholder {
			color: #999999;
		}
	}

	// 筛选按钮样式
	.filter-container {
		display: flex;
		justify-content: flex-start;
		// margin-bottom: 30rpx;
		// gap: 0;
		padding-left: 31.4rpx;
	}

	.filter-btn {
		font-size: 38.37rpx;
		font-weight: 500;
		letter-spacing: 0rpx;
		line-height: 55.57rpx;
		color: rgba(102, 102, 102, 1);
		margin-right: 59.31rpx;
		// padding: 20rpx 0;
		// flex: 1;
		// text-align: center;
		// font-size: 28rpx;
		// color: #999999;
		// // background: transparent;
		// border: none;
		// border-bottom: 4rpx solid transparent;
		// transition: all 0.3s ease;
		// cursor: pointer;
		// position: relative;

		&.active {
			padding-bottom: 3.49rpx;
			color: rgba(0, 0, 0, 1);
			border-bottom: 6.98rpx solid;
			border-image: linear-gradient(90deg, rgba(12, 193, 155, 1) 0%, rgba(91, 220, 222, 1) 34.03%, rgba(5, 145, 198, 1) 65.97%, rgba(2, 120, 220, 1) 100%) 6.98;
			border-radius: 1742.54rpx;
		}
	}

	// 表头样式
	.table-header {
		display: flex;
		align-items: center;
		margin-top: 52.33rpx;
		margin-bottom: 40.12rpx;
	}

	.header-item {
		display: flex;
		align-items: center;
		font-size: 31.4rpx;
		font-weight: 500;
		letter-spacing: 0rpx;
		line-height: 45.46rpx;
		color: rgba(51, 51, 51, 1);
		cursor: pointer;
		transition: color 0.3s ease;

		&:hover {
			color: #4A90E2;
		}

		text {
			margin-right: 8rpx;
		}
	}

	.name-header {
		flex: 2;
		justify-content: flex-start;
	}

	.price-header {
		flex: 1;
		justify-content: center;
		margin-right: 10rpx;
	}

	.change-header {
		flex: 1;
		justify-content: flex-end;
	}

	.sort-arrows {
		display: flex;
		flex-direction: column;
		margin-left: 8rpx;
	}

	.arrow-up {
		width: 18.39rpx;
		height: 18.39rpx;
		// opacity: 0.3;
		transition: opacity 0.3s ease;
		transform: rotate(0deg);
		margin-bottom: 2rpx;

		&.active {
			opacity: 1;
			filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
		}
	}

	.arrow-down {
		width: 18.39rpx;
		height: 18.39rpx;
		// opacity: 0.3;
		transition: opacity 0.3s ease;
		transform: rotate(180deg);

		&.active {
			opacity: 1;
			filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
		}
	}

	// 数据列表样式
	.data-list {
		max-height: calc(100vh - 400rpx);
		// background: #FFFFFF;
		// border-radius: 0 0 16rpx 16rpx;
		// overflow: hidden;
	}

	.data-item {
		display: flex;
		align-items: center;
		margin-bottom: 46.61rpx;
		border-bottom: 2rpx solid #F8F8F8;
		transition: background-color 0.3s ease;

		&:last-child {
			border-bottom: none;
		}

		&:hover {
			background-color: #F8F9FA;
		}
	}

	.item-left {
		flex: 2;
		display: flex;
		align-items: center;
	}

	.coin-icon {
		width: 80.24rpx;
		height: 80.24rpx;
		margin-right: 29.65rpx;
		border-radius: 50%;
	}

	.coin-info {
		display: flex;
		flex-direction: column;
	}

	.coin-name {
		font-size: 27.91rpx;
		font-weight: 500;
		letter-spacing: 0rpx;
		line-height: 40.42rpx;
		color: rgba(0, 0, 0, 1);
		margin-bottom: 8rpx;
	}

	.coin-pair {
		font-size: 24.42rpx;
		font-weight: 300;
		letter-spacing: 0rpx;
		line-height: 35.36rpx;
		color: rgba(0, 0, 0, 1);
	}

	.item-center {
		flex: 1;
		// display: flex;
		// justify-content: center;
	}

	.coin-price {
		flex: 1;
		font-size: 27.91rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		line-height: 40.42rpx;
		color: rgba(0, 0, 0, 1);
	}

	.exchange-rate {
		font-size: 20.93rpx;
		font-weight: 300;
		letter-spacing: 0rpx;
		line-height: 30.32rpx;
		color: rgba(0, 0, 0, 1);
	}

	.item-right {
		// flex: 1;
		display: flex;
		justify-content: flex-end;
	}

	.change-btn {
		// flex: 1;
		padding: 8.72rpx 19.19rpx;
		border-radius: 8.72rpx;
		min-width: 120rpx;
		text-align: center;

		&.positive {
			background: rgba(13, 179, 100, 1);

			.change-text {
				// color: #FFFFFF;
			}
		}

		&.negative {
			background: rgba(247, 56, 79, 1);

			.change-text {
				// color: #FFFFFF;
			}
		}
	}

	.change-text {
		font-size: 24.42rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		line-height: 35.36rpx;
		color: rgba(255, 255, 255, 1);
	}

	// 空列表
	.noproduct-box {
		// position: absolute;
		// width: 100%;
		// height: 100vh;
		// top: 150rpx;
		// left: 0;
		// right: 0;
		// bottom: 0;

		.noproduct {
			position: absolute;
			top: 50%;
			left: 50%;
			// right: 0;
			// bottom: 0;
			// margin: 0 auto;
			transform: translate(-50%, -50%);
			text-align: center;
		}
	}

	.noproduct-title {
		font-size: 31.4rpx;
		font-weight: 400;
		// letter-spacing: 0rpx;
		// line-height: 45.46rpx;
		color: rgba(61, 62, 82, 1);
	}

	.noproduct-img image {
		width: 174.43rpx;
		height: 135.29rpx;
	}
	
	// 加载提示样式
	.loading-tip {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx;
		text-align: center;
		
		text {
			font-size: 24.42rpx;
			color: rgba(150, 150, 150, 1);
		}
	}

	// 添加自选
	.self-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		width: 100%;
		gap: 34.89rpx;

		.self-item {
			flex: 0 0 calc(50% - 17.45rpx);
			position: relative;
			// width: 100%;
			// margin-right: 34.89rpx;
			margin-bottom: 0;
			border-radius: 20.93rpx;
			border: 1.74rpx solid rgba(195, 221, 250, 1);
			padding: 40.12rpx 22.68rpx 40.12rpx 31.4rpx;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;
			min-height: 150rpx;
			box-sizing: border-box;
			background-color: rgba(255, 255, 255, 0.5);

			.self-left {
				flex: 1;
				width: 100%;
				box-sizing: border-box;
				.name-box {
					margin-bottom: 22.68rpx;

					.currency-name {
						font-size: 27.91rpx;
						font-weight: 500;
						letter-spacing: 0rpx;
						line-height: 40.42rpx;
						color: rgba(0, 0, 0, 1);
					}

					.name-us {
						font-size: 27.91rpx;
						font-weight: 500;
						letter-spacing: 0rpx;
						line-height: 40.42rpx;
						color: rgba(150, 150, 150, 1);
					}
				}

				.price-change-box {
					display: flex;
					align-items: center;

					.price {
						font-size: 20.93rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 30.32rpx;
						color: rgba(0, 0, 0, 1);
					}

					.revenue-txt {
						font-size: 20.93rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 30.32rpx;
						margin-left: 24.42rpx;

						&.positive {
							color: rgba(13, 179, 100, 1);
						}

						&.negative {
							color: rgba(247, 56, 79, 1);
						}

						&:not(.positive):not(.negative) {
							color: rgba(13, 179, 100, 1);
						}
					}
				}
			}

			.self-right {
				position: absolute;
				top: 31.4rpx;
				right: 31.4rpx;

				.select-icon {
					width: 26rpx;
					height: 26rpx;
				}

				.no-choose {
					width: 26rpx;
					height: 26rpx;
					opacity: 1;
					border: 1.74rpx solid rgba(3, 125, 216, 1);
					border-radius: 50%;
				}

				.img-box {
					width: 26rpx;
					height: 26rpx;
					background: rgba(3, 125, 216, 1);
					border: 1.74rpx solid rgba(3, 125, 216, 1);
					border-radius: 50%;
					text-align: center;
					line-height: 26rpx;

					image {
						width: 20.93rpx;
						height: 18rpx;
						opacity: 1;
					}
				}
			}
		}
	}

	.add-self-but {
		margin-top: 95.94rpx;

		button {
			width: 570.38rpx;
			height: 97.68rpx;
			opacity: 1;
			border-radius: 26.16rpx;
			background: linear-gradient(90deg, rgba(12, 193, 155, 1) 0%, rgba(91, 220, 222, 1) 34.03%, rgba(5, 145, 198, 1) 65.97%, rgba(2, 120, 220, 1) 100%);
			font-size: 31.4rpx;
			font-weight: 700;
			letter-spacing: 0rpx;
			line-height: 45.46rpx;
			color: rgba(255, 255, 255, 1);
		}
	}

	.searchActive {
		background-color: #fff;
	}

	.search-modal {
		// width: 100%;
		height: 100vh;
		background-color: #fff;
		position: absolute;
		top: 150rpx;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0 66.28rpx;

		.hot-title {
			margin-bottom: 29.65rpx;
		}

		.ranking-list {

			.ranking-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 48.84rpx;

				.left {
					flex: 4;
					display: flex;
					align-items: center;

					.ranking-num {
						font-size: 24.42rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 35.36rpx;
						color: rgba(102, 102, 102, 1);
						margin-right: 24.42rpx;
					}

					.rankActive {
						width: 31.4rpx;
						height: 31.4rpx;
						opacity: 1;
						background: rgba(3, 125, 216, 1);
						border: 1.74rpx solid rgba(3, 125, 216, 1);
						border-radius: 50%;
						text-align: center;
						font-size: 20.93rpx;
						font-weight: 400;
						line-height: 30.32rpx;
						color: rgba(255, 255, 255, 1);
					}

					.ranking-name {
						.name {
							font-size: 27.91rpx;
							font-weight: 500;
							letter-spacing: 0rpx;
							line-height: 40.42rpx;
							color: rgba(0, 0, 0, 1);
						}

						.heat image {
							width: 15.85rpx;
							height: 20.61rpx;
							margin-right: 27.91rpx;
						}
					}

				}

				.middle {
					flex: 1;
					text-align: right;

					.price {
						font-size: 27.91rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 40.42rpx;
						color: rgba(0, 0, 0, 1);
					}

					.change-price {
						font-size: 20.93rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 30.32rpx;
						color: rgba(13, 179, 100, 1);

						&.positive {
							color: rgba(13, 179, 100, 1);
						}

						&.negative {
							color: rgba(247, 56, 79, 1);
						}
					}
				}

				.right {
					flex: 1;
					text-align: right;
					// width: 30.44rpx;
					// height: 29.02rpx;

					image {
						width: 30.44rpx;
						height: 29.02rpx;
					}
				}
			}
		}
	}

	.search-input-modal {
		// height: 100vh;
		position: absolute;
		top: 150rpx;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0 66.28rpx;

		.search-result {
			.result-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 48.84rpx;

				.left {
					flex: 4;
					font-size: 27.91rpx;
					font-weight: 500;
					letter-spacing: 0rpx;
					line-height: 40.42rpx;
					color: rgba(0, 0, 0, 1);
				}

				.middle {
					flex: 1;
					text-align: right;

					.price {
						font-size: 27.91rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 40.42rpx;
						color: rgba(0, 0, 0, 1);
					}

					.change-price {
						font-size: 20.93rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 30.32rpx;

						&.positive {
							color: rgba(13, 179, 100, 1);
						}

						&.negative {
							color: rgba(247, 56, 79, 1);
						}
					}
				}

				.right {
					flex: 1;
					text-align: right;
					// width: 30.44rpx;
					// height: 29.02rpx;

					image {
						width: 30.44rpx;
						height: 29.02rpx;
					}
				}
			}
		}
	}

	.nosearch-box {
		position: absolute;
		top: 50%;
		left: 50%;
		// right: 0;
		// bottom: 0;
		margin-top: -150rpx;
		transform: translate(-50%, -50%);
		text-align: center;
	}
</style>